<template>
  <div class="main-container">
    <!-- 顶部导航栏 -->
    <header class="top-header">
      <div class="logo-section">
        <span class="logo">💰</span>
        <span class="system-name">企业成本管理系统</span>
      </div>
      <div class="user-section">
        <el-dropdown>
          <span class="user-info">
            <el-icon>
              <User />
            </el-icon>
            <span>{{ currentUser || '管理员' }}</span>
            <el-icon class="el-icon--right">
              <ArrowDown />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <div class="content-wrapper">
      <!-- 左侧菜单 -->
      <aside class="sidebar">
        <el-menu :default-active="activeMenu" class="el-menu-vertical" router>
          <el-menu-item index="/dashboard">
            <el-icon>
              <Document />
            </el-icon>
            <span>首页</span>
          </el-menu-item>

          <el-menu-item index="/department">
            <el-icon>
              <OfficeBuilding />
            </el-icon>
            <span>部门管理</span>
          </el-menu-item>
          <el-menu-item index="/cost-item">
            <el-icon>
              <List />
            </el-icon>
            <span>成本项目</span>
          </el-menu-item>
          <el-menu-item index="/cost-record">
            <el-icon>
              <TrendCharts />
            </el-icon>
            <span>成本记录</span>
          </el-menu-item>
          <el-menu-item index="/budget-config">
            <el-icon>
              <DataAnalysis />
            </el-icon>
            <span>预算配置</span>
          </el-menu-item>
          <el-menu-item index="/user">
            <el-icon>
              <User />
            </el-icon>
            <span>用户管理</span>
          </el-menu-item>
        </el-menu>
      </aside>

      <!-- 右侧内容 -->
      <main class="main-content">
        <router-view />
      </main>
    </div>

    <!-- 底部信息 -->
    <footer class="footer">
      <p>企业成本管理系统 &copy; {{ new Date().getFullYear() }} All Rights Reserved.</p>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { User, ArrowDown, Document, OfficeBuilding, List, TrendCharts, DataAnalysis } from '@element-plus/icons-vue'

// 在 script setup 中，组件会自动注册

// 初始化路由
const router = useRouter()
const currentUser = ref('系统管理员')

// 计算当前激活的菜单
const activeMenu = computed(() => {
  return router.currentRoute.value.path
})

// 退出登录方法
const logout = () => {
  localStorage.removeItem('token')
  router.push('/login')
}

// 变量在 script setup 中自动暴露给模板
</script>
<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* 顶部导航栏 */
.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

/* 顶部导航栏样式已优化 */
.logo-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  font-size: 24px;
}

.system-name {
  font-size: 18px;
  font-weight: bold;
  color: #1890ff;
}

/* 顶部导航栏已简化 */

.user-section {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: #f5f5f5;
}

/* 内容区域 */
.content-wrapper {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 左侧菜单 */
.sidebar {
  width: 200px;
  background-color: #ffffff;
  border-right: 1px solid #e0e0e0;
  overflow-y: auto;
}

/* 主内容区 */
.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f7fa;
}

/* 底部信息 */
.footer {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
  color: #909399;
  font-size: 12px;
}
</style>